<template>
  <div class="app-container">

    <div class="customContainer">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-select v-model="formInline.from" placeholder="采购渠道" style="width:100px">
            <el-option v-for="item in type_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select filterable placeholder="下单类型" v-model="formInline.type" style="width:150px">
            <el-option v-for="item in ordertype_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select filterable placeholder="请选择收货门店" v-model="store_id" style="width:300px">
            <el-option v-for="item in store_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input style="width:300px" v-model="formInline.order_id" placeholder="请输入完整采购单号或单号末尾数字" @keyup.enter.native="searchClick"></el-input>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick">
            <template #default>搜索</template>
          </dj-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="采购单号" prop="order_id"></el-table-column>
        <el-table-column align="center" label="下单时间" prop="create_time"></el-table-column>
        <el-table-column align="center" label="下单人" prop="nick" width="100"></el-table-column>
        <el-table-column align="center" label="采购渠道" prop="from" width="100"></el-table-column>
        <el-table-column align="center" label="下单类型" prop="type" width="100"></el-table-column>
        <el-table-column align="center" label="收货门店" prop="store_id"></el-table-column>
        <el-table-column align="center" label="下单状态" prop="status" width="120">
          <template slot-scope="scope">
            <span :class="{danger:scope.row.status=='被打回'}">{{scope.row.status}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="采购确认" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.status!='下单成功'">-</span>
            <el-button @click="showInfo(scope.row.id,1)" v-else type="text">采购明细</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="物流发货" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.status!='下单成功'">-</span>
            <el-button @click="showInfo(scope.row.id,2)" v-else type="text">收货明细</el-button>
          </template>
        </el-table-column>
        <!-- 列表的操作按钮 -->
        <el-table-column align="center" label="操作" width="100">
          <template slot-scope="scope">
            <router-link v-if="scope.row.status=='被打回'"
              :to="{name:'warehouse/detailModify',params :{id:scope.row.id,status:scope.row.type,type:scope.row.type,from:scope.row.from,orderStatus:scope.row.status,routerflag:-1,}}">

              <el-button type="primary" plain size="mini">修改</el-button>
            </router-link>
            <router-link
              :to="{name:'warehouse/detailModify',params :{id:scope.row.id,status:scope.row.type,type:scope.row.from,routerflag:2,orderStatus:scope.row.status}}"
              v-else>
              <el-button type="primary" plain size="mini">详情</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹框 -->
    <el-dialog width="400px" :close-on-click-modal="false" :title="digTitle" :visible.sync="table_dialog">
      <el-table highlight-current-row :data="infoList" border size="small">
        <el-table-column align="center" prop="name"></el-table-column>
        <el-table-column align="center" label="种类" prop="type"></el-table-column>
        <el-table-column align="center" label="数量" prop="num"></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
        layout="prev, pager, next, jumper" :total="totalDataNumber"></el-pagination>
    </div>
  </div>
</template>
<script>
import { getStore, getList, getPage, getFlow } from '@/api/goodsflow/order_query';
export default {
  data() {
    return {
      listLoading: false,
      digTitle: '',
      table_dialog: false,
      infoList: [], //订单状态
      all_store_id: '',
      status_list: [
        { id: '1', name: '待处理' },
        { id: '2', name: '已处理' },
        { id: '3', name: '总部统配' }
      ],
      store_list: [],
      ordertype_list: [
        { id: '0', name: '下单类型' },
        { id: '1', name: '门店下单' },
        { id: '2', name: '总部统配' }
      ],
      type_list: [
        { id: '0', name: '采购渠道' },
        { id: '1', name: '供应商' },
        { id: '2', name: '中央仓' }
      ],
      store_id: '0',
      formInline: {
        store_id: '0', //收货门店
        order_id: '', //订单编号
        from: '0', //1.供应商 2.中央仓
        type: '0' //1门店下单  2.总部统配
      },
      list: null,
      totalDataNumber: 1,
      currentPage: 1,
      saveForm: {
        order_id: '',
        order_list: []
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (!vm.list) {
        vm.getStoreList();
      } else {
        vm.searchClick();
      }
    });
  },
  beforeRouteLeave(to, from, next) {
    this.list = [];
    next();
  },
  methods: {
    getStoreList() {
      this.listLoading = true;
      getStore({ category_id: 461 }).then(res => {
        if (res.length > 1) {
          res.unshift({ id: '0', name: '收货门店' });
        }
        this.store_list = res;
        if (this.store_list.length > 0) {
          this.store_id = this.store_list[0].id;
        } else {
          this.store_id = '';
        }
        this.searchClick();
      });
    },
    searchClick() {
      this.fetchData();
    },
    // 查看订单状态
    showInfo(id, i) {
      this.digTitle = i == 1 ? '采购明细' : '收货明细';
      this.infoList = [];
      getFlow({ id }, i).then(res => {
        let data = res.data;
        let list = [
          { name: i == 1 ? '待合并' : '尚未确认', type: data.one_type, num: data.one_num },
          { name: i == 1 ? '待确认' : '待发货', type: data.two_type, num: data.two_num },
          { name: i == 1 ? '待审批' : '待收货', type: data.three_type, num: data.three_num },
          { name: i == 1 ? '确认成功' : '已收货', type: data.four_type, num: data.four_num }
        ];
        this.infoList = list;
        this.table_dialog = true;
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      this.list = [];
      if (this.store_id == 0) {
        //是全部的话
        this.formInline.store_id = '0';
      } else {
        this.formInline.store_id = this.store_id;
      }

      getPage(this.formInline)
        .then(response => {
          this.totalDataNumber = response.data.page * 20;
          getList(this.formInline).then(res => {
            for (var i = 0; i < res.length; i++) {
              if (res[i].type == 1) {
                res[i].type = '门店下单';
              } else if (res[i].type == 2) {
                res[i].type = '总部统配';
              } else if (res[i].type == 7) {
                res[i].type = '总部下单';
              } else {
                res[i].type = '未知';
              }

              if (res[i].from == 1) {
                res[i].from = '供应商';
              } else if (res[i].from == 2) {
                res[i].from = '中央仓';
              }

              this.store_list.forEach((elem, index, arr) => {
                if (elem.id == res[i].store_id) {
                  res[i].store_id = elem.name;
                }
              });
            }
            this.list = res;
            this.listLoading = false;
          });
        })
        .catch(res => {
          this.listLoading = false;
        });
    },
    handleCurrentChange(val) {
      this.listLoading = true;
      this.list = [];
      getList(this.formInline, val).then(res => {
        for (var i = 0; i < res.length; i++) {
          if (res[i].type == 1) {
            res[i].type = '门店下单';
          } else if (res[i].type == 2) {
            res[i].type = '总部统配';
          } else {
            res[i].type = '总部统配';
          }

          if (res[i].from == 1) {
            res[i].from = '供应商';
          } else if (res[i].from == 2) {
            res[i].from = '中央仓';
          }
          this.store_list.forEach((elem, index, arr) => {
            if (elem.id == res[i].store_id) {
              res[i].store_id = elem.name;
            }
          });
        }
        this.list = res;

        this.listLoading = false;
      });
    }
  }
};
</script>